<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>Titpap Output 输出格式 - itxst.com</title>
    <meta name="keywords" content="Titpap Output 输出格式" />
    <meta name="description" content="Titpap Output 支持输出JSON对象或Html字符串存储编辑器的内容，我们将来在下面的例子演示如何使用这两种格式。" />
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <meta http-equiv="Content-Language" content="zh-CN">
    <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon" />
    <link href="/css/zt.css?ver=1.6.6" rel="stylesheet" type="text/css" media="all" />
    <script type="text/javascript" language="javascript" src="/js/jquery.js?ver=1.6.6"></script>
    <script type="text/javascript" src="/js/highlight/highlight.min.js?ver=1.6.6"></script>
    <link rel="stylesheet" type="text/css" href="/js/highlight/styles/vs2015x.css?ver=1.6.6">
    <script type="text/javascript" language="javascript" src="/js/comm.js?ver=1.6.6"></script>
    <script type="text/javascript" language="javascript" src="/js/zt.js?ver=1.6.6"></script>
    <script type="text/javascript" charset="utf-8" src="/js/layer/layer.js?ver=1.6.6"></script>
    <link rel="alternate" media="only screen and(max-width: 640px)" href="http://m.itxst.com/tiptap/output.html" >
    <!--[if lte IE 9]>
    <script src="/js/respond/respond.js?ver=1.6.6"></script>
    <![endif]-->
</head>
<body>
    <div class="body"  >
        <div class="header">
            <div class="naver">
                <div class="logo">
                    <a href="/"><img src="/img/logov31.png" /></a>
                </div>
                <div class="naver-left">
                 <a href="/tiptap/tutorial.html">tiptap 中文文档</a>
                </div>
                <div class="naver-search">
                    <div class="naver-search-txt">
                        <input type="text" id="keyword" placeholder="Please enter the keyword" data-topic="tiptap">
                    </div>
                    <div class="naver-search-btn"><a href="javascript:void(0)" onclick="Search()">Search</a></div>
                </div>
                 <div class="naver-right"> 
                        <a href="/ag-grid/tutorial.html">AG-GRID</a> 
                        <a href="/tiptap/tutorial.html">Tiptap</a> 
                        <a href="/css-flex/tutorial.html">CSS-FLEX</a> 
                        <a href="/Bootstrap-Table/QuickStart.html">Bootstrap-Table</a> 
                </div>
            </div>
            <div class="path">
                
            </div>
        </div>
        <div class="clearfix"></div>
        <div class="pagew">
        <div class="page" >
            <div class="page-body">
                <div class="content-detail">
                    <h1>Titpap Output 输出格式</h1>
               
               <p class="p"><strong>Titpap Output</strong> 支持输出<strong>JSON</strong>对象或<strong>Html</strong>字符串存储编辑器的内容，我们将来在下面的例子演示如何使用这两种格式。</p><h2>输出 JSON 格式</h2><p>获取编辑器内容的JSON对象</p><pre class="brush:js;toolbar:false"><code class="language-javascript">const json = editor.getJSON()</code></pre><p>通过JSON对象初始化编辑器内容</p><pre class="brush:js;toolbar:false"><code class="language-javascript">new Editor({
  content: {
    "type": "doc",
    "content": [
      // …
    ]
  },
})</code></pre><p>通过JSON对象设置编辑器内容</p><pre class="brush:js;toolbar:false"><code class="language-javascript">editor.commands.setContent({
  "type": "doc",
  "content": [
    // …
  ]
})</code></pre><p><a class="btntry" href="//debug.itxst.com/js/m2avey3e" target="_blank" title="在线试一试">在线试一试</a></p><h2>输出 html 格式</h2><p>获取编辑器内容的html字符串</p><pre class="brush:js;toolbar:false"><code class="language-javascript">const html = editor.getHTML()</code></pre><p>通过JSON对象初始化编辑器内容</p><pre class="brush:js;toolbar:false"><code class="language-javascript">new Editor({
  content: `&lt;p&gt;www.itxst.com&lt;/p&gt;`,
})</code></pre><p>通过html字符串设置编辑器内容</p><pre class="brush:js;toolbar:false"><code class="language-javascript">editor.commands.setContent(`&lt;p&gt;Example Text&lt;/p&gt;`)</code></pre><p><a class="btntry" href="//debug.itxst.com/js/m2avey3e" target="_blank" title="在线试一试">在线试一试</a></p><h2>Y.js&nbsp;实时协作</h2><p class="p">tiptap 支持通过 Y.js 实现多人实时协助，具体用法参考collaborative-editing菜单</p><h2>Markdown 格式</h2><p class="p">tiptap目前并不支持Markdown格式，因为json和html都是嵌套格式而Markdown是扁平的，如果你需要存储Markdown格式，需要通过第三方库将Json或html转换成Markdown格式</p><h2>监听内容变化</h2><pre class="brush:js;toolbar:false"><code class="language-javascript">const editor = new Editor({
  // intial content
  content: `&lt;p&gt;Example Content&lt;/p&gt;`,

  // 接听编辑器内容的变化
  onUpdate: ({ editor }) =&gt; {
    const json = editor.getJSON()
    // send the content to an API here
  },
})</code></pre><h2>渲染 html</h2><p>设置tiptap编辑器是否只读</p><pre class="brush:js;toolbar:false"><code class="language-javascript">//只读
editor.setEditable(false);
//可编辑
editor.setEditable(true);</code></pre><p>ProseMirror JSON 生成 HTML,在浏览页我们只需要显示存储在数据库的JSON,不需要创建tiptap编辑器实例。</p><h2>vue3 渲染 html</h2><pre class="brush:html;toolbar:false"><code class="language-html">&lt;template&gt;
  &lt;pre&gt;&lt;code&gt;{{ output }}&lt;/code&gt;&lt;/pre&gt;
&lt;/template&gt;

&lt;script&gt; 
import Bold from '@tiptap/extension-bold'  
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import { generateHTML } from '@tiptap/html'

const json = {
  type: 'doc',
  content: [
    {
      type: 'paragraph',
      content: [
        {
          type: 'text',
          text: 'Example ',
        },
        {
          type: 'text',
          marks: [
            {
              type: 'bold',
            },
          ],
          text: 'Text',
        },
      ],
    },
  ],
}


export default {
  computed: {
    output() {
      return generateHTML(json, [
        Document,
        Paragraph,
        Text,
        Bold,
        // other extensions …
      ])
    },
  },
}
&lt;/script&gt;</code></pre><h2>React 渲染 html</h2><pre class="brush:js;toolbar:false"><code class="language-javascript">import Bold from '@tiptap/extension-bold'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import { generateHTML } from '@tiptap/html'
import React, { useMemo } from 'react'

const json = {
  type: 'doc',
  content: [
    {
      type: 'paragraph',
      content: [
        {
          type: 'text',
          text: 'www.itxst.com',
        },
        {
          type: 'text',
          marks: [
            {
              type: 'bold',
            },
          ],
          text: 'Text',
        },
      ],
    },
  ],
}

export default () =&gt; {
  const output = useMemo(() =&gt; {
    return generateHTML(json, [
      Document,
      Paragraph,
      Text,
      Bold,
      // other extensions …
    ])
  }, [json])


  return (
    &lt;pre&gt;
      &lt;code&gt;{output}&lt;/code&gt;
    &lt;/pre&gt;
  )
}</code></pre>
 
               <h2>
    下载教程 Demo
</h2>
<p class="pe">
   本教程<b>Demo</b>的源码点击这里下载，<a href="https://img1.itxst.com/8/c/8c32fcdc12cb8847c62e405be8a73835.zip" target="_blank" textvalue="Tiptap Demo">Tiptap Demo</a>，下载完成后运行<b>npm i</b>初始化依赖包。
</p>
                </div>
                <div class="content-r">   <a href="/tiptap/tutorial.html" target="_self">
                     <img src="https://img1.itxst.com/0/9/09355b3592a0c16799b504a9f2a70303.png" alt="tiptap 中文文档" />
                    </a>                                                <a href="//www.itxst.com/vue-draggable/tutorial.html" target="_blank">
                                <img src="//img1.itxst.com/b/f/bf9af8368dfac84cd703ef54e1e89d14.png" alt="vue.draggable" />
                            </a>
 
                </div>
            </div>
            <div class="home-menu scroll">
                <div class="tree">
      <a data-level="1" class="leve-1   doc-1   " href="/tiptap/tutorial.html" title="tiptap 中文文档">快速入门</a>
      <a data-level="1" class="leve-1    arrow-2" href="/tiptap/configuration.html" title="Guide 向导">Guide 向导</a>
      <a data-level="2" class="leve-2   doc-1   " href="/tiptap/configuration.html" title="Tiptap 编辑器 Configuration 配置">configuration 配置</a>
      <a data-level="2" class="leve-2   doc-1   " href="/tiptap/roseMirrorapi.html" title="ProseMirror  API">prosemirror  api</a>
      <a data-level="2" class="leve-2   doc-1   " href="/tiptap/menus.html" title="tiptap menus 菜单">menus 菜单</a>
      <a data-level="2" class="leve-2   doc-1   " href="/tiptap/styling.html" title="Styling Titpap 样式">styling 样式</a>
      <a data-level="2" class="leve-2   doc-1    doc-2 " href="/tiptap/output.html" title="Titpap Output 输出格式">output 输出格式</a>
      <a data-level="2" class="leve-2   doc-1   " href="/tiptap/collaborative.html" title="tiptap collaborative 实时协作">collaborative 实时协作</a>
      <a data-level="2" class="leve-2   doc-1   " href="/tiptap/customextensions.html" title="tiptap 自定义扩展">extensions 自定义扩展</a>
      <a data-level="1" class="leve-1    arrow-1" href="/tiptap/api.html" title="tiptap api 列表">API 列表</a>
                 </div>
                 <div  class="clearfix"></div>
            </div>
        </div>
        <div class="clearfix"></div>
           <div class="footer">
© 2023 itxst.com All rights reserved.
</div>

<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?7e15ed96eb8133218e99de8bc1f5cb61";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
</script>
       </div>
    </div> 
</body>
</html>
